<template>
    <CommonContainer title="审批进度">
        <div>
                <el-timeline>
                    <el-timeline-item
                        v-for="(item, index) in flows"
                        :key="index"
                        color="#1890FF"
                        hide-timestamp
                    >
                        <div>
                            <p class="timelineItem">
                                <span class="recordContent" style="color: #333333">{{ item.assignee }}</span>
                                <span style="margin: 0 10px; color:#666666;">{{ item.nodeType == 1 ? '发起人' : '审批人' }}</span>
                                <span style="color: #999999">{{ item.endTime || item.startTime }}</span>
                            </p>
                            <div class="approveContent" v-if="item.auditResults">
                                <div style="color: #52C41A">{{ item.auditResults }}</div>
                                <div v-if="item.message">审批意见:{{ item.message }}</div>
                            </div>
                        </div>

                    </el-timeline-item>
                </el-timeline>
        </div>
    </CommonContainer>
</template>

<script>

export default {
    components: {},
    props: {
        flows:{
            type:Array,
            default:null
        }
    },
    data() {
        // 这里存放数据
        return {
        }
    },
    // 计算属性 类似于 data 概念
    computed: {},
    // 方法集合
    methods: {

    },
    mounted() {


    },

}
</script>

<style lang="scss" scoped>
.timelineItem {
    font-size: 14px;
    font-weight: 500;
    color: #666666;

    .recordContent {
        color: #333333;
    }
}

.approveContent {
    background-color: #F9FBFE;
    padding: 16px;

}
::v-deep ul {
    display: block;
    padding-inline-start: 0px;
}
</style>
